<template>
  <div class="bigDiv">
    <el-form ref="searchForm" :model="queryParams" :inline="true" label-width="88px">
		<div class="topNav">
			<el-button icon="el-icon-refresh" @click="resetSearch"
			  style="float:right"
			  type="text"
			  >重置</el-button
			>
			<el-button
			  type="text"
			  icon="el-icon-search"
			  @click="handelSearch"
			  style="float:right"
			  >搜索</el-button
			>
		</div>
      <el-form-item label="供应商名称" prop="orgNameZh" style="margin-bottom:0px;">
        <el-input
          v-model="queryParams.orgNameZh"
          placeholder="请输入关键词搜索"
          maxlength="50"
          size="small"
          clearable
          @keyup.enter.native="handelSearch"
        />
      </el-form-item>
      <el-form-item label="加点类型" prop="supplierType" style="margin-bottom:0px;">
        <el-select
          size="small"
          v-model="queryParams.supplierType"
          placeholder="请输入关键词搜索"
          filterable
          clearable
        >
          <el-option
            v-for="item in supplierTypeList"
            :key="item.optional1"
            :label="item.describe_"
            :value="item.optional1"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table :data="list">
      <el-table-column
        label="供应商名称"
        align="center"
        prop="orgNameZh"
        width="250"
      >
        <template slot-scope="scope">
          <el-tooltip
            :content="scope.row.orgNameZh"
            placement="bottom"
            effect="dark"
            class="nameBox"
          >
            <div>{{ scope.row.orgNameZh }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        label="所属供应商"
        align="center"
        prop="parentId"
        width="250"
      >
        <template slot-scope="scope">
          <el-tooltip
            v-if="scope.row.parentOrgName"
            :content="scope.row.parentOrgName"
            placement="bottom"
            effect="dark"
            class="nameBox"
          >
            <div>{{ scope.row.parentOrgName }}</div>
          </el-tooltip>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="加点类型" align="center" prop="supplierType" width="250">
        <template slot-scope="scope">
            <el-tooltip
            :content="fomartSupplierType(scope.row.supplierType)"
            placement="bottom"
            effect="dark"
            class="nameBox"
          >
          <div>{{ fomartSupplierType(scope.row.supplierType) }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="加点值" align="center" prop="priceFloat" />
      <el-table-column label="商品来源" align="center" prop="goodsSource"  width="200">
         <template slot-scope="scope">
          <span 
            >{{ fomartGoodsSource(scope.row.goodsSource) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="联系人姓名" align="center" prop="contact" width="100px" />
      <el-table-column label="联系人电话" align="center" prop="contactTel" width="200px" /> 
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-notebook-2"
            @click="handleEditChildSupplier(scope.row)"
            >子供应商
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="detailTitle"
      :visible.sync="dialogDetailVisible"
      width="60vw"
    >
      <el-form label-width="88px">
        <el-form-item label="供应商名称" prop="orgNameZh">
          <span>
            {{supplierInfo.orgNameZh}}
          </span>
        </el-form-item> 
        <el-form-item label="加点类型" prop="code">
           <el-select
            size="small"
            v-model="infoParams.supplierType"
            placeholder="请输入关键词搜索"
            filterable
            clearable
            style="width:300px"
          >
            <el-option
              v-for="item in supplierTypeList"
              :key="item.optional1"
              :label="item.describe_"
              :value="item.optional1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加点值" prop="priceFloat">
          <el-input-number 
            style="width:300px"
            v-model="infoParams.priceFloat"
            placeholder="请输入加点值 0~10"
            clearable
            size="small"
            :min="0"
            :max="10"
          />
        </el-form-item>
        <el-form-item label="商品来源" prop="goodsSource">
          <el-select
            style="width:300px"
            size="small"
            v-model="infoParams.goodsSource"
            placeholder="请选择商品来源"
            filterable
            clearable
          >
            <el-option
              v-for="item in goodsSourceList"
              :key="item.dictionaryKey1"
              :label="item.optional1"
              :value="item.dictionaryKey1"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" size="small" @click="submitSupplierInfo">提交</el-button>
      </div>
    </el-dialog> 

    <el-dialog
      :title="supplierDialogTitle"
      :visible.sync="childSupplierDialog" 
      v-if="childSupplierDialog" 
      :fullscreen="true"
      append-to-body
    > 
      <el-form  
        :label-position="'right'"
        >
        <el-row>
          <el-col :span="6">
            <el-form-item label="供应商名称" style="margin-bottom:0px;">
              <el-input
                v-model="childParams.orgNameZh"
                placeholder="请输入关键词搜索"
                maxlength="50"
                size="small"
                clearable
                style="width: 260px;"
              />
            </el-form-item> 
          </el-col>
          <el-col :span="6">
            <el-button 
              icon="el-icon-refresh" 
              @click="resetChildSearch" 
              type="text"
              >
              重置
            </el-button>
            <el-button
              type="text"
              icon="el-icon-search"
              @click="handelChildSearch" 
            >
              搜索
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button 
              icon="el-icon-plus" 
              @click="addChildSupplier" 
              type="text"
              style="float: right;"
              >
              添加子供应商
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="childSupplierList" v-loading="loading">
        <el-table-column
          label="供应商名称"
          align="center"
          prop="orgNameZh"
          width="250"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.orgNameZh"
              placement="bottom"
              effect="dark"
              class="nameBox"
            >
              <div>{{ scope.row.orgNameZh }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="加点类型" align="center" prop="supplierType" width="250">
          <template slot-scope="scope">
              <el-tooltip
              :content="fomartSupplierType(scope.row.supplierType)"
              placement="bottom"
              effect="dark"
              class="nameBox"
            >
            <div>{{ fomartSupplierType(scope.row.supplierType) }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="加点值" align="center" prop="priceFloat" />
        <el-table-column label="商品来源" align="center" prop="goodsSource"  width="200">
          <template slot-scope="scope">
            <span 
              >{{ fomartGoodsSource(scope.row.goodsSource) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="联系人姓名" align="center" prop="contact" width="100px" />
        <el-table-column label="联系人电话" align="center" prop="contactTel" width="200px" /> 
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="150px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-link"
              @click="unBindEvent(scope.row)"
              >
              解绑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="childTotal > 0"
        :total="childTotal"
        :page.sync="childParams.pageNum"
        :limit.sync="childParams.pageSize"
        @pagination="getChildSupplierList"
      />
    </el-dialog>

    <el-dialog
      title="添加子供应商"
      :visible.sync="selectSupplierShow" 
      v-if="selectSupplierShow" 
      width="1000px" 
      append-to-body
    >
    <el-form label-width="100px">
				<el-form-item class="transfer-section"> 
					<el-transfer
						filterable
						filter-placeholder="请输入供应商"
						v-model="supplierIds"
						:titles="['可选项', '已选项']"
						:props="{
							key: 'id',
							label: 'orgNameZh'
						}"
						:data="supplierList">
					</el-transfer>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="selectSupplierConfirm">确 定</el-button>
				<el-button @click="selectSupplierShow = false">取 消</el-button>
			</div>
    </el-dialog>
  </div>
</template>

<script>
import {
  supplierPageApi,
  supplierTypeListApi,
  goodsSourceListApi,
  updateSupplierInfoApi,
  supplierAllList,
  updateSupplierParentIdApi,
  getChildSupplierApi
} from "@/api/supplierActivity/supplier"; 

export default {
  name: "supplier-mgt",
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orgNameZh: "",
        supplierType: "",
      },
      childParams: {
        pageNum: 1,
        pageSize: 10,
        orgNameZh: "",
        parentId: ""
      },
      childTotal: 0,
      total: 0,
      list: [],
      detailTitle: "",
      dialogDetailVisible: false, 
      supplierInfo:{},
      pageParams: {
        pageNum: 1,
        pageSize: 100,
      }, 
      infoParams:{
        id: "",
        supplierType: "",
        goodsSource: "",
        priceFloat: 0
      },
      supplierTypeList:[],
      goodsSourceList: [],
      selectSupplierShow: false,
      supplierIds: [],
      supplierList: [],
      supplierDialogTitle: '',
      childSupplierDialog: false,
      childSupplierList: []
    };
  },
  mounted() {
    this.getSupplierType();
    this.getGoodsSource();
    this.getList();
    this.getSuplierList();
  },
  methods: {
    getSuplierList() {
      supplierAllList({
        auditStatus: '1'
      }).then(res => {
        this.supplierList = res.rows;
      })
    },
    getList() {
      supplierPageApi(this.queryParams).then((res) => {
        this.total = res.total;
        this.list = res.rows;
      });
    },
    getChildSupplierList() {
      this.loading = true;
      getChildSupplierApi(this.childParams).then((res) => {
        this.childSupplierList = res.rows;
        this.childTotal = res.total;
        this.loading = false;
      })
    },
    getSupplierType() {
      supplierTypeListApi(this.pageParams).then((res) => {
        this.supplierTypeList = res.rows;

      });
    },
    getGoodsSource() {
      goodsSourceListApi(this.pageParams).then((res) => {
        this.goodsSourceList = res.rows;
      });
    },
    fomartSupplierType(typeCode) {
      return this.supplierTypeList.filter(item => item.optional1 === typeCode)[0].describe_;
    },
    fomartGoodsSource(typeCode) {
      return this.goodsSourceList.filter(item => item.dictionaryKey1 === typeCode)[0].optional1;
    },
    handelSearch() {
      this.getList();
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.getList();
    },
    handleEdit(row) {
      this.detailTitle = "编辑供应商" + row.orgNameZh + "信息";
      this.dialogDetailVisible = true;
      this.supplierInfo = row;
      this.infoParams = {
        id: row.id,
        supplierType: row.supplierType,
        goodsSource: row.goodsSource,
        priceFloat: row.priceFloat
      }
    },
    unBindEvent(row) {  
      this.$confirm('是否解绑该子供应商?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateSupplierInfoApi({
            id: row.id, 
            parentId: ''
          }).then(()=>{
            this.$message({
              message: '操作成功！',
              type: 'success'
            })
            this.getChildSupplierList();
          })
        });
    },
    addChildSupplier() { 
      this.supplierIds = [];
      this.selectSupplierShow = true;
    },
    handleEditChildSupplier(row) {
      this.supplierDialogTitle = row.orgNameZh + ' - 子供应商管理'
      this.parentId = row.id;
      this.childParams = {
        pageNum: 1,
        pageSize: 10,
        orgNameZh: "",
        parentId: row.id
      }
      this.getChildSupplierList();
      this.childSupplierDialog = true;

    },
    resetChildSearch() { 
      this.childParams = {
        pageNum: 1,
        pageSize: 10,
        orgNameZh: "",
        parentId: this.parentId
      }
      this.getChildSupplierList();
    },
    handelChildSearch() { 
      this.getChildSupplierList();
    },
    selectSupplierConfirm() { 
      console.log(this.supplierIds);
      updateSupplierParentIdApi(this.supplierIds, this.parentId).then(() => { 
        this.$message({
                message: '操作成功！',
                type: 'success'
              })
        this.selectSupplierShow = false; 
        this.resetChildSearch();
      })
    },
    submitSupplierInfo() {
      updateSupplierInfoApi(this.infoParams).then(()=>{
        this.$message({
                message: '操作成功！',
                type: 'success'
              })
        this.dialogDetailVisible = false; 
        this.getList();
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.nameBox {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  height: 25px;
  text-overflow: ellipsis;
} 
::v-deep .el-form-item.transfer-section .el-form-item__content{
  margin-left:50px;
}
    
::v-deep .el-form-item.transfer-section .el-transfer .el-transfer-panel{
  width: 300px !important;
} 
</style>